<template>
  <div>
    <a-form
      :model="form"
      :rules="rules"
      :labelCol="labelCol"
      :wrapper-col="wrapperCol"
      ref="formRef"
    >
      <a-form-item label="被邀请人完成首次订单:" name="money">
        <a-input
          style="width: 180px; margin-left: 20px"
          placeholder="请输入金额"
          v-model:value="form.money"
          allow-clear
          suffix="元"
          :disabled="editable"
        ></a-input>
        
      </a-form-item>
      <a-form-item label="时效" name="timingDate">
        <a-input
          :disabled="editable"
          style="width: 220px; margin-left: 20px"
          placeholder="请输入时效，为0时，即代表无时间限制！"
          v-model:value="form.timingDate"
          allow-clear
          suffix="天"
        ></a-input>
        

      </a-form-item>
      <a-form-item label="活动结束时间" name="finishDate">
        <a-date-picker
          :disabled="editable"
          valueFormat="YYYY/MM/DD HH:mm:ss"
          :show-time="{ format: 'HH:mm:ss' }"
          v-model:value="form.finishDate"
          @change="handleChange"
          style="margin-left: 20px"
        />

      </a-form-item>
      <a-form-item label="邀请好友提醒" name="inviteRemind">
        

        <a-radio-group
          v-model:value="form.inviteRemind"
          style="margin-left: 20px"
        >
          <!--  @change="handleGrantShape" -->
          <a-radio
            v-for="(item, index) in fangType1"
            :value="item.id"
            :key="item.id"
            :disabled="editable"
            >{{ item.name }}</a-radio
          >
        </a-radio-group>
      </a-form-item>
      <a-form-item label="活动规则" name="activityRule">
        <a-textarea
          :disabled="editable"
          placeholder="请输入活动规则"
          v-model:value="form.activityRule"
          style="margin-left: 20px"
        ></a-textarea>
      </a-form-item>
      <a-form-item label="奖励说明" name="awardExplain">
        <a-textarea
          :disabled="editable"
          placeholder="请输入奖励说明"
          v-model:value="form.awardExplain"
          style="margin-left: 20px"
        ></a-textarea>
      </a-form-item>
    </a-form>
    <a-row>
      <a-col :span="8" :offset="4">
        
        <a-button
          type="primary"
          v-if="editable"
          v-has="{ a: $route, b: 2 }"
          @click="edit(false)"
          class="d-a-center"
          >编辑规则</a-button
        >
        <a-button
          type="primary"
          v-else
          @click="handleSubmit"
          v-preventReClick="5000"
          class="d-a-center"
          >保存</a-button
        >
      </a-col>
    </a-row>
  </div>
</template>
<script>
import {
  reactive,
  ref,
  computed,
  createVNode,
  watch,
  toRefs,
  unref,
  toRaw,
  isReactive,
  toRef,
  onMounted,
} from "vue";
import {
  CheckOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons-vue";
import dayjs from "dayjs";

import { Modal, message } from "ant-design-vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import * as api from "@/api/market/partner.js";
export default {
  setup() {
    const formRef = ref("");

    const data = reactive({
      editable: true,
      form: {
        finishDate: ''
      },
      fangType1: [
        {
          id: 0,
          name: "关闭",
        },
        {
          id: 1,
          name: "开启",
        },
      ],
    });

    const title = ref(""); //分类名称

    const modalTitle = ref("新增耗材");
    const rules = {
      money: [
        { required: true, message: "请输入!" },
        { pattern: /^(\d{1,2}|100)$/, message: "请输入0-100的整数" },
      ],
      timingDate: [
        { required: true, message: "请输入!" },
        { pattern: /^(\d{1,2}|100)$/, message: "请输入0-100的整数" },
      ],
      finishDate: [{ required: true, message: "请输入!" }],
      inviteRemind: [{ required: true, message: "请输入!" }],
      activityRule: [{ required: true, message: "请输入!" }],
      awardExplain: [{ required: true, message: "请输入" }],
    };
    const rules1 = {};

    onMounted(() => {
      init();
    });
    async function init() {
      let res = await api.selectRule();
      if (res.success) {
        data.form = { ...res.object };
        console.log("数据",data.form)
      }
    }
    const handleChange = (v, dateString) => {
      console.log(v, dateString);
      data.form.finishDate = dateString;
    };
    const handleSubmit = async () => {
      formRef.value
        .validate()
        .then(async () => {
          let res = await api.updateInviteRule({ ...data.form });
          if (res.success) {
            message.success("操作成功");
            data.editable = true;
          }
        })
        .catch((error) => {
          console.log("error", error);
        });
    };
    const edit = (status)=>{
      data.editable = status;
      console.log(data.editable)
    }
    return {
      ...toRefs(data),
      modalTitle,
      formRef,
      rules,
      rules1,
      title,
      handleSubmit,
      labelCol: { style: { width: "170px" } },
      labelCol1: { style: { span: 8, offset: 4 } },
      labelCol2: { style: { span: 4 } },
      wrapperCol: { span: 20 },
      handleChange,
      edit
    };
  },

  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    QuestionCircleOutlined,
    PlusOutlined,
  },
};
</script>

<style scoped lang="less">
.act {
  color: #2a9d8f;
}
.ant-calendar-picker-input {
  padding-left: 10rpx;
  margin-left: 10rpx;
}
.ant-calendar-picker {
  margin-left: 20px !important;
}
.spe {
  .ant-input-affix-wrapper {
    margin-left: 20px !important;
  }
}
.ant-form-item-label {
  font-size: 24px !important;
  font-weight: 500;
}
</style>
